<template>
  <div class="category-container">
    <div class="goods-list">
        <div class="item" v-for="item in goodsList" :key="item"
        @mouseenter="showGoodsColPart(item), isShowGoodsBox=true"
        @mouseleave="isShowGoodsBox=false">
            {{item}}
            <i class="iconfont">&#xe662;</i>
        </div>
    </div>
    <div class="goods-box" @mouseenter="isShowGoodsBox=true" 
    @mouseleave="isShowGoodsBox=false"
    v-if="isShowGoodsBox">
        <div class="goods-item" v-for="item in store.state.category.currentGoodsCol.value" :key="item.name">
            <a :href="item.hrefUrl">
                <img class="goods-item-img" :src="item.imgUrl"
                style="width:52px; height:52px;" alt="" />
            </a>
            <a :href="item.hrefUrl">
                <p>{{item.name}}</p>
            </a>
        </div>
        <div class="look-all" v-for="item in store.state.category.currentGoodsCol.value.slice(0, 1)" 
        :key="item.name">
            <a :href="item.moreHref" target="_blank" v-if="item.moreHref">
                <i class="iconfont">&#xe6b9;</i>
                <span>查看全部</span>
            </a>
        </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useStore } from 'vuex'
export default {
  name: 'VmCategoryList',
  props: {
    goodsList: {
        type: Array,
        default: () => []
    },
    goodsColData: {
        type: Array,
        default: () => []
    }
  },
  setup (props) {
    const store = useStore()

    // 通过选中的商品名而显示和隐藏该商品的板块
    const showGoodsColPart = goodsName => {
      const goodsColData = {
        currentName: goodsName,
        data: props.goodsColData
      }
      store.commit('category/showGoodsColPart', goodsColData)
    }

    // 控制商品栏目板块
    const isShowGoodsBox = ref(false)

    return { store, showGoodsColPart, isShowGoodsBox }
  }
}
</script>

<style lang="scss" scoped>
.category-container {
    background: transparent;
    position: relative;
    width: 0;
    z-index: 99;
    height: 512px;
    padding: 8px;
    .goods-list {
        height: 100%;
        width: 200px;
        box-sizing: border-box;
        border: 1px solid #FFF;
        .item {
            color: #708090;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-indent: 25px;
            cursor: pointer;
            &:first-child {
                margin-top: 10px;
            }
            &:last-child {
                margin-bottom: 10px;
            }
            position: relative;
            i {
                position: absolute;
                right: 5%;
            }
            &:hover {
                color: #2b1216;
                background: #FFFAFA;
            }
        }
    }
}
    
.goods-box {
        position: absolute;
        left: 200px;
        top: 8px;
        height: 496px;
        box-sizing: border-box;
        background-color: #FFF;
        padding: 20px;
        padding-bottom: 0;
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: row;
        flex-basis: auto;
        writing-mode: vertical-lr;
        .goods-item {
            writing-mode: horizontal-tb;
            width: 200px;
            display: flex;
            margin-bottom: 50px;
            cursor: pointer;
            user-select: none;
            align-items: center;
            flex-basis: auto;
            flex-shrink: 0;
            position: relative;
            &-img {
                display: block;
                margin-left: 8px;
            }
            &:nth-child(5n+5) {
                margin-bottom: 0;
            }
            p {
                color: #455d7a;
                line-clamp: 2;
                width: 138px;
                max-width: 80%;
                margin-left: 15px;
                font-size: 14px;
                line-height: 19px;
                overflow: hidden;
                text-overflow: ellipsis;
                &:hover {
                    color: #ee2746;
                }
            }
        }
        .look-all {
            writing-mode: horizontal-tb;
            background: #f9f9f9;
            margin-bottom: 20px;
            border-radius: 24px;
            position: relative;
            cursor: pointer;
            user-select: none;
            a {
                display: flex;
                width: 156px;
                height: 48px;
                line-height: 48px;
                font-size: 16px;
                color: #000;
                margin: 0 10px;
                justify-content: center;
                align-items: center;
                i {
                    font-size: 24px;
                    color: #93b5cf;
                }
                span {
                    margin-left: 36px;
                    color: #0eb0c9;
                }
            }
        }
}

</style>>
